import React, { useEffect, useState } from 'react';
import { getRecommendSongs } from '@/pages/service';
import { get } from 'lodash'
import { NavBar, Icon } from 'antd-mobile';
import Item from '@/components/find/components/songItem';
import styles from './styles.less'


function RecommendPage({ history }) {
  const [songs, setSongs] = useState([])

  useEffect(() => {
    (async () => {
      const res = await getRecommendSongs()
      const songs = get(res, 'data.data.dailySongs')
      setSongs(songs)
    })()
  }, [])

  return (
    <div className={styles.wrapper}>
      <div className={styles.nav}>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          rightContent={<Icon type="ellipsis" />}
          onLeftClick={() => history.go(-1)}
        >
          每日推荐
        </NavBar>
      </div>
      <img
        src="http://p1.music.126.net/6y1Yi_5gRCm8_Rvc0bB-lA==/109951166354671180.jpg?imageView&quality=89"
      />
      <div className={styles.songs}>
        {
          songs.map(d => (
            <Item
              data={d.al}
              key={d.id}
            />
          ))
        }
      </div>
    </div>
  )
}
export default RecommendPage